<template>
	<view class="container">
		<view v-if="false"  class="cell">
			<view class="cell-top">
				青少年素质教育舒服画征集
			</view>
			<view class="cell-line">
				
			</view>
			<view class="cell-title">
				报名时间
			</view>
			<view class="cell-btns">
				<view class="cell-btn">{{dateStr}}</view>
			</view>
	<!-- 		<view class="cell-title">
				参数日期
			</view>
			<view class="cell-btns" style="margin-bottom: 0;">
				<view class="cell-btn">绘画</view>
				<view class="cell-btn">书法</view>
			</view> -->
		</view>
		<view  class="cell">
	<!-- 		<view  class="cell-one">
				<view  class="cell-one-txt">数量:</view>
				<view  class="cell-one-op">
					<u-number-box v-model="value" @change="valChange"></u-number-box>
				</view>
			</view> -->
			<view  class="cell-one">
				<view  class="cell-one-txt">姓名:</view>
				<view  class="cell-one-op">
				  <u--input
					placeholder="请输入姓名"
					border="surround"
					v-model="name"
					@change="onChangeName"
				  ></u--input>
				</view>
			</view>
			<view  class="cell-one">
				<view  class="cell-one-txt">性别:</view>
				<view  class="cell-one-op">
				  <u--input
					placeholder="请输入性别"
					border="surround"
					v-model="name"
					@change="onChangeName"
				  ></u--input>
				</view>
			</view>
			<view  class="cell-one">
				<view  class="cell-one-txt">电话号码:</view>
				<view  class="cell-one-op">
					<u--input
						placeholder="请输入手机号码"
						border="surround"
						v-model="phone"
						@change="onChangePhone"
					></u--input>
				</view>
			</view>
			<view  class="cell-one">
				<view  class="cell-one-txt">身份证:</view>
				<view  class="cell-one-op">
					<u--input
						placeholder="请输入身份证"
						border="surround"
						v-model="phone"
						@change="onChangePhone"
					></u--input>
				</view>
			</view>
			<view  class="cell-one">
				<view  class="cell-one-txt">年龄:</view>
				<view  class="cell-one-op">
					<u--input
						placeholder="请输入年龄"
						border="surround"
						v-model="phone"
						@change="onChangePhone"
					></u--input>
				</view>
			</view>
			<view  class="cell-one">
				<view  class="cell-one-txt">地址:</view>
				<view  class="cell-one-op">
					<u--input
						placeholder="请输入地址"
						border="surround"
						v-model="phone"
						@change="onChangePhone"
					></u--input>
				</view>
			</view>
		</view>
		
		
		<view class="kong">
			
		</view>
		
		<view class="btns">
			<!-- <view class="btn-l">
				实付金额: 
				<view class="money">
					￥233
				</view>
			</view> -->
			<view class="btn-r">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'template',
		data() {
			return{
				dateStr: (new Date()).getMonth() + 1 + '年' + (new Date()).getDate() + '日',
				keyword: '',
				show:false,
				value: 1,
				name: '',
				phone: '',
			}
		},
		onLoad() {
			
		},
		methods: {
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			onChangeName() {
				
			},
			onChangePhone() {},
			confirm(e) {
                console.log('confirm', e)
				if(this.index == 1){
					this.classTxt = e.value[0].label
				}
				if(this.index == 2){
					this.dayTxt = e.value[0].label
				}
				if(this.index == 3){
					this.suiTxt = e.value[0].label
				}
                this.show = false
			},
			cancel() {
				this.show = false
			},
			
			onSelect(index){
				if(index == 1){
					this.index = 1
					this.columns = this.c1
				}
				if(index == 2){
					this.index = 2
					this.columns = this.c2
				}
				if(index == 3){
					this.index = 3
					this.columns = this.c3
				}
				this.show = true
			}
		}
	}
</script>
<style  lang="scss" scoped>
	.container{
		padding: 20rpx;
		box-sizing: border-box;
	}

	.cell{
		width: 100%;
		background: #fff;
		display: flex;
		flex-direction: column;
		margin-bottom: 40rpx;
		padding: 30rpx;
		box-sizing: border-box;
		border-radius: 30rpx;
		.cell-top{
			width: 100%;
			background: #fff;
			// padding: 30rpx;
			box-sizing: border-box;
			font-size: 38rpx;
			font-weight: bold;
		}
		.cell-line{
			width: 100%;
			height: 2rpx;
			background: #f4f4f4;
			margin: 30rpx 0;
		}
		.cell-title{
			width: 100%;
			color: #333;
			font-size: 38rpx;
			font-weight: bold;
			margin-bottom: 30rpx;
		}
		.cell-btns{
			width: 100%;
			align-items: center;
			margin-bottom: 40rpx;
			display: flex;
			.cell-btn{
				width: 320rpx;
				height: 60rpx;
				border-radius: 40rpx;
				background: #f4f4f4;
				margin-right: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				color:#454545;
			}
		}
		.cell-one{
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			.cell-one-txt{
				width: 180rpx;
			}
			.cell-one-op{
				flex: 1;
			}
		}
	}
	
			
	.kong{
		width: 100%;
		height: 120rpx;
	}
	.btns{
		width: 100%;
		height: 100rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		background: #f7f7fa;
		display: flex;
		.btn-l{
			height: 100rpx;
			flex: 1;
			border-right: 2rpx solid #e1e1e1;
			border-top: 2rpx solid #e1e1e1;
			display: flex;
			align-items: center;
			padding-left: 30rpx;
			box-sizing: border-box;
			color: #888888;
			font-size: 30rpx;
			.money{
				color: #e94f4f;
			}
		}
		.btn-r{
			width: 100%;
			height: 100rpx;
			background: #e94f4f;
			border-top: 2rpx solid #e94f4f;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 32rpx;
		}
	}
	
	

</style>